{% extends "PersonCenter/base.html" %}

{% block title %}个人信息{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/userdata.css') }}">
    <link href="{{ url_for('static',filename='css/folder/bootstrap.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='css/folder/jquery-1.9.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
{% endblock %}

{% block body %}
<!--返回-->
<div id="test">
    <span id="sp11"><a href="{{ url_for("index.index") }}">首页</a></span>&nbsp;>
    <span id="sp22">管理</span>&nbsp;>
    <span id="sp33"><a href="{{ url_for("person.userInfo") }}">个人资料</a></span>
</div>
<!--中间卡片-->
<div class="container">
    <div class="col-md-2">
        <!--左侧导航开始-->
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <!--主选项：资料修改-->
                    <p class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">资料修改</a>
                    </p>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div><a href="{{ url_for("person.changePass") }}" style="font-weight: initial"><b>修改密码</b></a></div>
                        <div><a href="{{ url_for("person.userInfo") }}" style="font-weight: bold;color: black">个人资料</a></div>
                        <div><a href="{{ url_for("person.showAdd") }}" style="font-weight: bold">收货管理</a></div>
                    </div>
                </div>
            </div>
        </div>
        <!--左侧导航结束-->
    </div>
    <div class="col-md-10	">
        <div class="panel panel-default">
            <ul class="nav nav-tabs">
                <li><a href="{{ url_for("person.changePass") }}">修改密码</a></li>
                <li class="active"><a href="{{ url_for("person.userInfo") }}">个人资料</a></li>
                <li><a href="{{ url_for("person.showAdd") }}">收货管理</a></li>
            </ul>
            <div class="panel-body">
                <!--修改资料表单开始-->
                <form id="form-change-info" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-md-2 control-label">用户名：</label>
                        <div class="col-md-8">
                            <input name="userName" id="userName" class="userName" type="text" class="form-control" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">电话号码：</label>
                        <div class="col-md-8">
                            <input name="userPhone" id="userPhone" class="userPhone" type="text" class="form-control" placeholder="请输入电话号码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">电子邮箱：</label>
                        <div class="col-md-8">
                            <input name="userEmail" id="userEmail" class="userEmail" type="text" class="form-control" placeholder="请输入电子邮箱">
                        </div>
                    </div>
                    <div class="form-group" style="display: flex">
                        <button type="button" class="layui-btn" id="test1" style="margin-left: 60px;height: 30px;line-height: 30px;padding: 0 5px">上传头像</button>
                        <div style="margin-left: 40px">
                            <div class="layui-upload-list" style="margin:0">
                                <img class="layui-upload-img" id="demo1" style="width: 92px;height: 92px" src="../../static/image/头像/头像.png">
                                <p id="demoText"></p>
                            </div>
                            <div style="width: 95px;margin-top: 5px">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input id="btn-change-info" type="button" class="btn btn-primary" value="修改" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<div id="bottom"></div>
<script type="text/javascript">
    layui.use(['laydate','table','form','upload', 'element', 'layer'],function () {
        var laydate=layui.laydate;
        var table=layui.table;
        var form=layui.form;
        var $=layui.$;
        var upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/person/uploadImg'
            ,method:'POST'
            ,before: function(obj){
                {#console.log(document.getElementById("bookname").value)#}
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                console.log(res)
                {#document.getElementById("pngname").value=res.filename;#}
                //上传成功的一些操作
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1,time:1000});
                }
            }
        });
    })

    /*显示用户资料*/
    $(document).ready(function () {
        $.ajax({
            url:"/person/get_by_id",
            type:"get",
            dataType:"JSON",
            success:function (json) {
                if(json.state==200){
                    console.log(json);
                    $("#userName").val(json.data.username);
                    $("#userEmail").val(json.data.useremail);
                    $("#userPhone").val(json.data.userphone);
                }
            }
        })
    });

    layui.use('layer', function(){
        var layer = layui.layer;

        /*点击修改个人信息按钮*/
        $("#btn-change-info").click(function () {
            console.log($("#form-change-info").serialize())
            $.ajax({
                url: "/person/change_info",
                type: "post",
                data:$("#form-change-info").serialize(),
                dataType: "json",
                success:function (json) {
                    console.log(json);
                    if(json.state==200){
                        layer.open({
                            title: '提示'
                            ,content: json.msg,
                            yes: function(layero, index){
                                console.log(layero, index);
                                location.href="{{ url_for("person.userInfo") }}";
                            }
                        });
                    }
                }
            })
        });
    });
</script>
{% endblock %}